<template>
	<view class="container" :style="'background-size: 100% auto; background-image: url(' + bgImage + ');'">
		
		<!-- 规则 -->
		<navigator url="/pages/rule/index?type=jika">
			<view class="float-btn rule global-shadow" hover-class="hover">
				<image mode="aspectFill" src="@/static/smallBox/rule.png"></image>
				<text>规则</text>
			</view>
		</navigator>
		
		<!-- 分享 -->
		<view class="float-btn share global-shadow" hover-class="hover" @tap="isSharePopup = true">
			<text class="new-iconfont icon-wechat"></text>
			<text>分享</text>
		</view>
		
		<TextNavBar :title="info.title"></TextNavBar>
		
		<view class="card" v-for="(task, index) in taskList">
			<view class="top">
				<image class="icon" mode="widthFix" src="https://cdn2.hquesoft.com/box/jika/title-icon.png"></image>
				<view class="index">任务{{index + 1}}</view>
				<view class="title">{{task.title}}</view>
			</view>
			<view class="chip-list">
				<view class="item" v-for="(item, index) in task.chips">
					<image :src="item.icon" mode="widthFix" class="icon"></image>
					<view class="total" :class="{disabled: item.user_stock === 0}">{{item.user_stock || 0}}</view>
				</view>
			</view>
			<view class="sku-list">
				<view class="item" v-for="(item, index) in task.skus">
					<image :src="item.thumb" mode="widthFix" class="thumb"></image>
					<view class="right">
						<view class="title">{{item.title}}</view>
						<view class="stock">剩余{{item.stock}}份</view>
					</view>
				</view>
			</view>
			<!-- <view class="swap-limit-c" v-if="task.swap_limit">每人限兑{{task.swap_limit}}次</view> -->
			<image mode="widthFix" @tap="confirmSwap(task)" class="confirm-btn" src="https://cdn2.hquesoft.com/box/jika/confirm.png"></image>
			<view class="swap-limit-c" v-if="task.swap_limit">每人限兑{{task.swap_limit}}次</view>
			<view class="chip-tips">
				<image mode="widthFix" src="https://cdn2.hquesoft.com/box/jika/chip.png" class="icon"></image>
				<span class="text" @tap="toLink(task.link)">去集卡片</span>
			</view>
			<view class="user-c">
				<view>当前已兑人数 {{task.sales}} 人</view>
				<view class="headimg-list"></view>
			</view>
		</view>
		
		<PageRender v-if="info.page" :fullPageMode="false" :page="info.page"></PageRender>
		
		<ConfirmSwapPopup v-if="isConfirmSwapPopup" @close="isConfirmSwapPopup = false" @success="confirmSuccess" :task="currentTask"></ConfirmSwapPopup>
		
		<!-- 分享弹窗 -->
		<SharePopup v-if="isSharePopup" @close="isSharePopup = false" :info="posterInfo"></SharePopup>

	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import ConfirmSwapPopup from "./components/ConfirmSwapPopup"
	
	export default {
		components: {
			ConfirmSwapPopup
		},
		data() {
			return {
				isInit: false,
				uuid: '',
				isNotFound: false,
				info: {},
				currentTask: {},
				isConfirmSwapPopup: false,
				isSharePopup: false
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
			share() {
				let title = this.info.title
				return {
					path: '/pages/jika/detail?uuid=' + this.info.uuid + '&invite_node=jika-' + this.info.uuid,
					title: title,
					thumb: this.info.thumb
				}
			},
			bgImage () {
				if (!this.isInit) {
					return ''
				}
				return this.info.bg || 'https://cdn2.hquesoft.com/box/jika/bg.png'
			},
			posterInfo() {
				let globalShareConfig = this.getShareConfig(false)
				
				let title =  '快来集卡兑礼吧~'
				
				return {
					title: title,
					path: this.getShareConfig().path,
					thumb: this.info.thumb,
					app_url: globalShareConfig.app_url,
				}
			},
			taskList () {
				return this.info.tasks || []
			}
		},
		watch: {
		},
		onLoad(e) {
			this.uuid = e.uuid

			uni.showLoading({
				title: '加载中'
			})
			this.initData().then(res => {
				this.isInit = true
				uni.hideLoading()
			}).catch(res => {
				if (res.statusCode == 404) {
					this.isNotFound = true
				}
			})
		},
		onShow() {
			if (this.isInit) {
				this.initData().then(res => {
					this.isInit = true
				}).catch(res => {
					if (res.statusCode == 404) {
						this.isNotFound = true
					}
				})
			}
		},
		methods: {
			st_loadData(){
				let st = true;
				if(st == 1){
					console.info(1)
				}
			},
			st_list(){
				let status = true;
				if(status){
					status = false;
					console.info(222)
				}
			},
			st_pay(){
				let s = 1;
				if(s == 1){
			
				}else if(s == 2){
				
				}
			},
			confirmSwap (task) {
				let emptyChip = task.chips.find(item => {
					return !item.user_stock || item.user_stock < 0
				})
				
				if (emptyChip) {
					uni.showModal({
						title: '卡片不足',
						content: '立即去收集更多卡片吧~',
						confirmText: '去集卡',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								this.toLink(task.link)
							}
						}
					})
				}
				else {
					this.currentTask = task
					this.isConfirmSwapPopup = true
				}
			},
			confirmSuccess () {
				this.isConfirmSwapPopup = false
				this.initData()
			},
			sharePage () {
				this.isSharePopup = true
			},
			initData() {
				
				return this.$http(`/jikas/${this.uuid}`).then(res => {
					this.info = res.data.info
					
					// for test
					this.currentTask = this.taskList[0]

					uni.setNavigationBarTitle({
						title: res.data.info.title
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.st_main{
		background-color: transparent;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
	}
	.st_list{
		background-color: transparent;
		display: flex;
		font-size: 28rpx;
	}
	.float-btn {
		position: fixed;
		right: 0rpx;
		top: 260rpx;
		width: 130rpx;
		height: 66rpx;
		background: #FFEFB3;
		border-radius: 33px 0px 0px 33px;
		padding: 0rpx 14rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 1000;
	
		font-weight: 500;
		font-size: 24rpx;
	
		image {
			width: 30rpx;
			height: 36rpx;
		}
	
		&.my {
			top: 350rpx;
	
			image {
				width: 30rpx;
				height: 40rpx;
			}
		}
	
		&.share {
			top: 400rpx;
	
			.icon-wechat {
				font-size: 40rpx;
			}
		}
	}
	
	.container {
		// background: red;
		min-height: 100vh;
		padding-top: 500rpx;
		padding-bottom: 100rpx;
		
		.card {
			width: 686rpx;
			// height: 738rpx;
			margin: 0rpx auto 30rpx auto;
			background: #FFF8ED;
			border: 6rpx solid #FFECCB;
			border-radius: 40rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			
			.top {
				display: flex;
				align-items: center;
				
				.icon {
					width: 36rpx;
				}
				.index {
					font-size: 36rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #333333;
					margin-left: 10rpx;
				}
				.title {
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #8C5D0F;
				}
			}
			
			.chip-list {
				display: flex;
				justify-content: center;
				margin: 60rpx 0rpx 30rpx 0rpx;
				flex-wrap: wrap;
				.item {
					width: 130rpx;
					height: 180rpx;
					// background: url('https://cdn2.hquesoft.com/box/jika/card.png');
					// background-size: 100% auto;
					// background-repeat: no-repeat;
					position: relative;
					margin: 0rpx 10rpx;
					// background: rgba(0, 0, 0, 0.6);
					
					.total {
						// width: 60rpx;
						padding: 0rpx 16rpx;
						height: 36rpx;
						background: linear-gradient(0deg, #FF8D7D, #EC4330);
						box-shadow: 0px 8rrpx 10rpx 0px rgba(243, 167, 158, 0.5);
						border-radius: 20rpx;
						position: absolute;
						right: -10rpx;
						top: -10rpx;
						color: white;
						text-align: center;
						font-size: 26rpx;
						font-weight: 500;
						line-height: 36rpx;
						&.disabled {
							background: rgba(0, 0, 0, 0.5);
						}
					}
					.icon {
						width: 130rpx;
						height: 160rpx;
						// display: none;
					}
				}
			}
			
			.sku-list {
				.item {
					display: flex;
					align-items: center;
					padding: 20rpx;
					border-bottom: 1rpx solid #eee;
					
					&:first-child {
						border-top: 1rpx solid #eee;
					}
					
					.thumb {
						width: 100rpx;
						height: 100rpx;
						flex: 0 0 100rpx;
						background: #FFFFFF;
						border: 6rpx solid #FFF0D7;
						border-radius: 20rpx;
					}
					
					.right {
						margin-left: 10rpx;
						.title {
							font-size: 30rpx;
							font-family: PingFang;
							font-weight: bold;
							color: #333333;
							
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						.stock {
							font-size: 26rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #B5AB99;
						}
					}
				}
			}
			
			.swap-limit-c {
				text-align: center;
				font-size: 26rpx;
				
			}
			
			.confirm-btn {
				width: 500rpx;
				display: block;
				margin: 0rpx auto;
				margin-top: 50rpx;
			}
			
			.chip-tips {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20rpx 0rpx;
				.icon {
					width: 34rpx;
					height: 34rpx;
				}
				.text {
					text-decoration: underline;
				}
			}
			
			.user-c {
				display: flex;
				justify-content: center;
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #333333;
			}
		}
	}
	
</style>
